---
title: Установка Astro вручную
description: 'Как установить Astro вручную с помощью NPM, PNPM или Yarn.'
i18nReady: true
---
import Button from '~/components/Button.astro'
import { FileTree } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import ReadMore from '~/components/ReadMore.astro'

В этом руководстве вы пройдете через шаги по ручной установке и настройке нового проекта Astro.

:::tip[Предпочитаете более быстрый способ начать работу?]
Вместо этого воспользуйтесь инструментом [Astro CLI](/ru/install/auto/).
:::

#### Предварительные условия

- **Node.js** — `v18.14.1` или выше.
- **Текстовый редактор** — Мы рекомендуем [VS Code](https://code.visualstudio.com/) с нашим [официальным расширением Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Терминал** — доступ к Astro осуществляется через интерфейс командной строки (CLI).

#### Установка

Если вы не хотите использовать наш автоматический CLI-инструмент `create astro`, вы можете установить проект самостоятельно, следуя приведенному ниже руководству.

## 1. Создайте каталог

Создайте пустой каталог с названием вашего проекта, а затем перейдите в него.

```bash
mkdir my-astro-project
cd my-astro-project
```

Как только вы окажетесь в новой директории, создайте файл проекта `package.json`. Так вы будете управлять зависимостями проекта, включая Astro. Если вы не знакомы с этим форматом файла, выполните следующую команду для его создания.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm init --yes
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm init 
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn init --yes
  ```
  </Fragment>
</PackageManagerTabs>



## 2. Установите Astro

Сначала установите зависимости Astro внутри вашего проекта.

:::note[Важно]
Astro должен быть установлен локально, а не глобально. Убедитесь, что вы *не* запускаете `npm install -g astro`, `pnpm add -g astro` или `yarn add global astro`.
:::

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add astro
  ```
  </Fragment>
</PackageManagerTabs>

Затем замените код внутри секции "scripts" вашего `package.json` следующим образом:

```json title="package.json" del={2} ins={3-6}
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
```

Эти скрипты вы будете использовать позже в руководстве для запуска Astro и выполнения различных команд.

## 3. Создайте свою первую страницу

В текстовом редакторе создайте новый файл в вашей директории по адресу `src/pages/index.astro`. Это будет ваша первая страница в проекте Astro.

Для этого руководства скопируйте и вставьте в новый файл следующий фрагмент кода (включая `---` тире):

```astro title="src/pages/index.astro"
---
// Добро пожаловать в Astro! Все, что находится между этими кодовыми заборами с тройным тире
// это ваш компонент "frontmatter". Он никогда не запускается в браузере.
console.log('This runs in your terminal, not the browser!');
---
<!-- Ниже расположен ваш "шаблон компонента". Это просто HTML, но с
     но с некоторой магией, которая поможет вам создавать отличные шаблоны. -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>
```

## 4. Создайте свой первый статический ресурс

Вам также понадобится создать директорию `public/` для хранения ваших статических ресурсов. Astro всегда будет включать эти ресурсы в вашу окончательную сборку, поэтому вы можете безопасно ссылаться на них из шаблонов компонентов.

В текстовом редакторе создайте новый файл в директории по адресу `public/robots.txt`. `robots.txt` — это простой файл, который будет включен большинством сайтов, чтобы сообщить поисковым ботам, таким как Google, как обращаться с вашим сайтом.

Для этого руководства скопируйте и вставьте следующий фрагмент кода в новый файл:

```diff title="public/robots.txt"
# Пример: Разрешить всем ботам сканировать и индексировать ваш сайт.
# Полный синтаксис: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /
```

## 5. Создайте `astro.config.mjs`.

Astro настраивается с помощью файла `astro.config.mjs`. Этот файл необязателен, если вам не нужно настраивать Astro, но вы можете захотеть создать его сейчас.

Создайте `astro.config.mjs` в корне вашего проекта и скопируйте в него приведенный ниже код:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});
```

Если вы хотите включить [компоненты UI-фреймворка](/ru/guides/framework-components/), такие как React, Svelte и т.д., или использовать другие инструменты, такие как Tailwind или Partytown в вашем проекте, вот где вы будете [вручную импортировать и настраивать интеграции](/ru/guides/integrations-guide/).

<ReadMore>Для получения дополнительной информации читайте [справочник по конфигурации API](/ru/reference/configuration-reference/) Astro.</ReadMore>

## 6. Добавьте поддержку TypeScript

TypeScript настраивается с использованием `tsconfig.json`. Даже если вы не пишете код на TypeScript, этот файл важен, чтобы такие инструменты, как Astro и VS Code, могли понять ваш проект. Некоторые функции (например, импорт пакетов npm) не полностью поддерживаются в редакторе без файла `tsconfig.json`.  

Если вы собираетесь писать код на TypeScript, рекомендуется использовать шаблон Astro `strict` или `strictest`. Вы можете посмотреть и сравнить три конфигурации шаблонов в [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).

Создайте `tsconfig.json` в корне вашего проекта и скопируйте в него приведенный ниже код. (Вы можете использовать `base`, `strict` или `strictest` для вашего шаблона TypeScript):

```json title="tsconfig.json" "base"
{
  "extends": "astro/tsconfigs/base"
}
```

Наконец, создайте `src/env.d.ts`, чтобы TypeScript знал о типах окружения, доступных в проекте Astro:

```ts title="src/env.d.ts"
/// <reference types="astro/client" />
```

<ReadMore>Для получения дополнительной информации прочтите [руководство по настройке TypeScript от Astro](/ru/guides/typescript/#настройка).</ReadMore>

## 7. Следующие шаги

Если вы выполнили все шаги, описанные выше, каталог вашего проекта теперь должен выглядеть следующим образом:

<FileTree>
- node_modules/
- public/
  - robots.txt
- src/
  - pages/
    - index.astro
  - env.d.ts
- astro.config.mjs
- package-lock.json or `yarn.lock`, `pnpm-lock.yaml`, etc.
- package.json
- tsconfig.json
</FileTree>

Поздравляем, теперь вы готовы к использованию Astro!

Если вы полностью следовали этому руководству, вы можете сразу перейти к [Шаг 2: Запуск Astro](/ru/install/auto/#2-запускаем-astro-), чтобы продолжить и узнать, как запустить Astro в первый раз.